<template>
  <view>
    <u-navbar autoback placeholder>
      <template #center>
        <view class="w-280"> 交易关闭 </view>
      </template>
    </u-navbar>
    <view class="flex p-12 bg-white mb-12">
      <view class="mt-4 mr-8"> <u-icon name="map" size="36rpx"></u-icon></view>

      <view class="flex-1">
        <view class="flex justify-between">
          <text> 送至 北京市昌平区通天岩</text>
        </view>
        <view class="text-12 pt-10 color-gray">
          <text>用户名称</text>
          <text>15676548817</text>
        </view>
      </view>
    </view>
    <view class="mb-12 bg-white pb-16">
      <view class="flex items-center p-12">
        <u-image
          radius="4px"
          width="24px"
          height="24px"
          src="https://qxt-oss.yummall.cn/1762452183367946240/image/m0oyxuxy-1kai3bkj9.jpg"
        ></u-image>
        <view class="flex w-full border-box justify-between px-12">
          <view class="flex">
            <view class="text-14 mr-8 ellipsis-1">程厂长</view>
            <u-icon name="arrow-right" size="24rpx" color="#999"></u-icon>
          </view>
          <view class="color-tip text-14">交易关闭</view>
        </view>
      </view>
      <view class="flex p-12 bg-white">
        <u-image width="240rpx" height="240rpx"></u-image>
        <view class="pl-10 pt-10 flex-1">
          <view class="ellipsis-2 color-black h-43"
            >买一送一实惠商品浓浓奶香买一送一实惠商品浓浓奶香买一送一实惠商品浓浓奶香</view
          >
          <view class="ellipsis-2 text-14 px-8 color-tip pt-8">商品规格</view>
          <view class="flex justify-between pt-12">
            <view class="text-16"> <text class="text-14">￥</text> 88.00</view>
            <view class="text-14">x 1</view>
          </view>
        </view>
      </view>

      <view class="flex justify-end gap-8 p-12">
        <view>
          <u-button
            text="加入购物车"
            shape="circle"
            :custom-style="{ height: '56rpx', border: '1rpx solid #999' }"
          ></u-button>
        </view>
      </view>
      <view class="flex justify-between px-12">
        <view class="text-14 color-gray">商品总价</view>
        <view class="text-16"> <text class="text-14">￥</text> 88.00</view>
      </view>
      <view class="flex justify-between pt-10 px-12">
        <view class="text-14 color-gray">运费</view>
        <view class="text-16"> <text class="text-14">￥</text> 88.00</view>
      </view>
      <view class="flex justify-between pt-10 px-12">
        <view class="text-14 color-gray">实付金额</view>
        <view class="text-16 text-red">
          <text class="text-14">￥</text> 88.00</view
        >
      </view>
    </view>
    <view class="bg-white p-12 mt-12 color-gray">
      <view class="py-4 color-black">订单信息</view>
      <view class="flex pt-10 text-14">
        <view>订单备注</view>
        <view class="ml-8">订单备注</view>
      </view>
      <view class="flex justify-between items-center">
        <view class="flex pt-10 text-14">
          <view>订单编号</view>
          <view class="ml-8">1211111112333</view>
        </view>
        <view class="copy-btn color-black text-12">复制</view>
      </view>
      <view class="flex pt-10 text-14">
        <view>约返积分</view>
        <view class="ml-8">0积分</view>
      </view>
      <view class="flex pt-10 text-14">
        <view>创建时间</view>
        <view class="ml-8">2024-10-15 15:30:00</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.copy-btn {
  padding: 4rpx 24rpx;
  border-radius: 24rpx;
  background-color: #e6e6e6;
}
</style>
